<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            width: 3000px;
            height: 5000px;
        }
        .back{
            width: 50px;
            height: 50px;
            background-color: #6ff;
            position: fixed;
            right: 50px;
            bottom: 50px;
        }
    </style>
</head>
<body>
    <div class="back"></div>
</body>
<script>
    // 文档的可视宽高 (只能取值 无法赋值)
    // 常规浏览器   可视宽高 =>存在html中
    // document.documentElement.clientWidth 
    // document.documentElement.clientHeight

    // 低版本IE     可视宽高 =>存在body中
    // document.body.clientWidth
    // document.body.clientHeight

    // 兼容
    // document.documentElement.clientWidth || document.body.clientWidth
    // document.documentElement.clientHeight || document.body.clientHeight

    // console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);
    // console.log(document.body.clientWidth,document.body.clientHeight);


    // var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
    // var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

    // console.log(clientWidth ,clientHeight);

    // 文档的实际宽度和高度 (只能取值 无法赋值)
    // 兼容
    // document.documentElement.scrollWidth || document.body.scrollWidth
    // document.documentElement.scrollHeight || document.body.scrollHeight

    // var scrollWidth = document.documentElement.scrollWidth || document.body.scrollWidth;
    // var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

    // console.log(scrollWidth ,scrollHeight);


    // 滚动条 距离文档左边(左移)和顶部(上升)的位置    (可以取值 也可以赋值)
    // 兼容
    // document.documentElement.scrollLeft || document.body.scrollLeft
    // document.documentElement.scrollTop || document.body.scrollTop

    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    console.log(scrollLeft,scrollTop);

    window.onscroll = function(){
        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(scrollLeft,scrollTop);
    }


    var back = document.getElementsByClassName("back")[0];
    back.onclick = function(){
        document.documentElement.scrollLeft = 0;
        document.documentElement.scrollTop = 0;
    }

</script>
</html>